<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<div class="inbox-nav-bar no-content-padding" style="padding:4px 14px;height:40px;margin-bottom: 50px;">
	<h1 ><i class="fa fa-fw fa-sitemap"></i> 业务组管理 &nbsp;
	</h1>
	<div class="inbox-checkbox-triggered" style="margin-left:400px;">
		<div class="btn-group">
			<h5 class=" txt-color-blueDark hidden-tablet">当前组：<i class="fa fa-fw fa-arrow-right"></i> <span id="ajax_department_name_selected"> 正在加载...</span>  &nbsp;</h5>
		</div>
	</div>
	<div class="smart-form pull-right" style="margin: 0;">
		<div class="inline-group">
			<label class="radio">
				<input type="radio" name="query-type" value="own" >
				<i></i>该组成员</label>
			<label class="radio">
				<input type="radio" name="query-type" value="outer">
				<i></i>非该组成员</label>
			<label class="radio">
				<input type="radio" name="query-type" value="all" checked="">
				<i></i>所有成员</label>
		</div>
	</div>

</div>
<div id="inbox-content" class="inbox-body no-content-padding">
	<textarea id="nestable-output" rows="3" class="form-control font-md" style="display:none"></textarea>
	<div class="inbox-side-bar" style="width:450px;">

		<h6>
			<a id="dict_new_option" href="javascript:void(0);" class="btn btn-success btn-xs pull-left " style="margin-left:-13px"><i class="fa fa-plus"></i> 添加新业务组 </a>
			<a id="" href="javascript:loadDepartments();" class="btn btn-success  btn-xs pull-right " style="margin-left:8px;margin-right: 40px;"><i class="fa fa-refresh"></i> 刷新  </a>
			<a id="ajax_department_save" href="javascript:void(0);" class="btn btn-default btn-xs pull-right  btn-success" style="margin-left:8px;"><i class="fa fa-save"></i> 保存修改  </a>
		</h6>
		<div class="dd custom-scroll" id="ajax_department_nestlist" style="padding:2px;overflow:scroll;width: 395px;">

		</div>
	</div>
	<div class="table-wrap custom-scroll animated fast fadeInRight" style="margin-left:400px;">
		<div class="col-sm-12 col-md-121 col-lg-12">
			<div class=" ">
				<div class="row" id="ajax_member_list_row">

					<table id="ajax_member_table" class="table table-striped table-bordered table-hover">
					</table>
					<div id="ajax_member_list_page">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	pageSetUp();
	/*
	 * Load delete row plugin
	 */
	loadScript("../resource/com/js/plugin/delete-table-row/delete-table-row.js");

	/*
	 * Fixed table height
	 */
	tableHeightSize()
	$(window).resize(function() {
		tableHeightSize()
	})
	function tableHeightSize() {
		var tableHeight = $(window).height() - 142;
		$('.table-wrap').css('height', tableHeight + 'px');
		$('#ajax_department_nestlist').css('height', tableHeight - 35 + 'px');
	}

	var ajax_DepartmentId = "";
	/*
	 * LOAD INBOX MESSAGES
	 */
	loadDepartments();
	function loadDepartments(){
		$("#ajax_department_name_selected").html($("#ajax_department_nestlist li:first").attr("data-name"));
		loadURL("ajax-department!nestlist.action", $('#ajax_department_nestlist'));
	}

	setTimeout(initClick,1000);
	function initClick(){
		if($("#ajax_department_nestlist li").length > 0){
			ajax_DepartmentId = $("#ajax_department_nestlist li:first").attr("data-id");
			$("#ajax_department_name_selected").html($("#ajax_department_nestlist li:first").attr("data-name"));
			var rdata = {keyId:ajax_DepartmentId};
			loadInbox(rdata)
		}else{
			$('#inbox-content > .table-wrap').html(" <i class='fa fa-reply txt-color-orangeDark'></i> 请选择<strong> 业务组 </strong>或<strong> 添加新业务组 </strong> ！");
		}
	}
	function loadInbox(data){
		load_member_jqGrid(data);
	}
	/*
	 * Buttons (compose mail and inbox load)
	 */
	$(".inbox-load").click(function() {
		loadDepartments();
	});

	$("#dict_new_option").click(function(e) {
		$.SmartMessageBox({
			title : "<i class='fa fa-plus-square txt-color-orangeDark'></i>  添加  <span class='txt-color-orangeDark'><strong> 新业务组 </strong></span> ",
			content : "请输入一个新业务组名称",
			buttons : "[取消][确定]",
			input : "text",
			placeholder : "输入名称..."
		}, function(ButtonPress, Value) {
			//alert(ButtonPress + " " + Value);
			if(ButtonPress=="确定"){
				save("",Value);
				loadDepartments();
			}
		});
		e.preventDefault();
	})

	function fn_edit(id){
		$.SmartMessageBox({
			title : "<i class='fa fa-edit txt-color-orangeDark'></i>  编辑  <span class='txt-color-orangeDark'><strong> 业务组名称 </strong></span> ",
			content : "请输入一个新名称",
			buttons : "[取消][确定]",
			input : "text",
			placeholder : "输入名称..."
		}, function(ButtonPress, Value) {
			if(ButtonPress=="确定"){
				save(id,Value);
				loadDepartments();
				reladGrid({keyId:id});
			}
		});
	}
	function fn_delete(id){
		$.SmartMessageBox({
			title : "<i class='fa fa-minus-square txt-color-orangeDark'></i>  删除  <span class='txt-color-orangeDark'><strong> 该业务组 </strong>，删除后，该业务组成员的部门将设置成无组状态。</span> ",
			content : "确定删除该选项吗？",
			buttons : '[取消][确定]'
		}, function(ButtonPressed) {
			if (ButtonPressed === "确定") {
				var vActionUrl = "<%=path %>/com/ajax-department!delete.action";
				var data = {keyId:id};
				ajax_action(vActionUrl,data,null,function(data){
					_show(data);
					loadDepartments();
					reladGrid(data);
				})

			}
		});
	}

	function save(id,name){
		//ajax执行返回时触发
		var vActionUrl = "<%=path %>/com/ajax-department!save.action";
		var data = {"departId":ajax_DepartmentId, "keyId":id,"name":name};
		ajax_action(vActionUrl,data,null,function(data){
			_show(data);
		})
	}

	function fn_members_save(id,action,name,dutyId){
		//ajax执行返回时触发
		var vActionUrl = "<%=path %>/com/ajax-department!membersMethod.action";
		var data = {"departmentid":ajax_DepartmentId, "keyId":id,"type":action,"name":name,"dutyId":dutyId};
		ajax_action(vActionUrl,data,null,function(data){
			_show(data);
			reladGrid(ajax_DepartmentId);
		});

	}
	function fn_members_action(id,action,dutyId){
		fn_members_save(id,action,"",dutyId);
	}

	//保存所有的业务组上下级，最多三级
	$("#ajax_department_save").click(function(e) {
		$.SmartMessageBox({
			title : "<i class='fa fa-save txt-color-orangeDark'></i> 确定 <span class='txt-color-orangeDark'><strong> 保存 </strong> </span> 您对业务组的层级修改设置吗？",
			content : "",
			buttons : '[取消][确定]'
		}, function(ButtonPressed) {
			if (ButtonPressed === "确定") {
				var vActionUrl = "<%=path%>/com/ajax-department!resave.action";
				$.ajax({url:vActionUrl,cache:false,dataType:"json",async:true,method:"post",
					data:{"departmentsJson":$('#nestable-output').val()},
					success: function(data){
						if(data.state=="200"){
							//前台显示出来
							$.smallBox({
								title : "提示：",
								content : "<i class='fa fa-clock-o'></i> <i>"+data.message+"</i>",
								color : "#659265",
								iconSmall : "fa fa-thumbs-up bounce animated",
								timeout : 4000
							});
						}else{
							$.smallBox({
								title : "操作失败",
								content : "<i class='fa fa-clock-o'></i> <i>"+data.message+"</i>",
								color : "#C46A69",
								iconSmall : "fa fa-times fa-2x fadeInRight animated",
								timeout : 6000
							});
						}
						//loadDepartments();
					}
				});
			}
		});
		e.preventDefault();
	})
</script>
<script type="text/javascript">
	function load_member_jqGrid(data){
		jQuery("#ajax_member_table").jqGrid({
			url:'ajax-department!memberList.action',
			datatype: "json",
			postData:data,
			colNames:['',"名称",'手机号码',"有效期(天)","操作","id","dutyId"],
			colModel:[
				{name:'userImg',index:'userImg', width:40,sortable:false,search:false,formatter:imgFormat},
				{name:'name',index:'name', width:80,search:true,sortable:true,
					searchoptions:{sopt: ["cn"],clearSearch:true}},
				{name:'mobile',index:'mobile', width:80,search:false},
				{name:'validPeriod',index:'validPeriod', width:40,search:false},
				{name:'state',index:'state', search:false,width:200,formatter:stateFormat},
				{name:'id',index:'id',search:false,hidden:true},
				{name:'dutyId',index:'dutyId',search:false,hidden:true},
			],
			rowNum : 10,
			rowList:[10,20,30],
			pager : '#ajax_member_list_page',
			sortname : 'createDate',
			sortorder : "desc",
			gridComplete:function(){
				$(".ui-jqgrid-bdiv").css("overflow-x","hidden");
				jqGridStyle();
			},
			jsonReader: {
				root: "dataRows",
				page: "page",
				total: "total",
				records: "records",
				repeatitems : false
			},
			caption : "<i class='fa fa-arrow-circle-right'></i> 成员列表",
			rownumbers:true,
			gridview:true,
			shrinkToFit:true,
			viewrecords: true,
			autowidth: true,
			height:'auto',
			forceFit:true,
			loadComplete: function() {
			}
		});
		$(window).on('resize.jqGrid', function() {
			jQuery("#ajax_member_table").jqGrid('setGridWidth', $("#ajax_client_list_row").width());
		})
		jQuery("#ajax_member_table").jqGrid('filterToolbar',{searchOperators:false,stringResult:true});

		jQuery("#ajax_member_table").jqGrid('navGrid', "#ajax_client_list_page", {
			edit : false,
			add : false,
			del : false,
			search:false
		});
	};
</script>
<script type="text/javascript">
	function imgFormat(cellvalue, options, cell){
		if(cellvalue != ""){
			var imgUrl = '<img style="border-radius: 50%;" height="30" width="30" alt="" src="'+cellvalue+'">';
		}else{
			var imgUrl = '<img style="border-radius: 50%;" height="30" width="30" alt="" src="../resource/com/img/avatars/male.png">';
		}
		return imgUrl;
	};
	function stateFormat(cellvalue, options, cell){
		var id = cell['id'];
		var restr = "";
		if(cellvalue != ""){
			restr = "<span class='label label-info'>"+cellvalue+"</span> ";
			restr = restr + "<a class='btn btn-danger btn-xs' onclick=\"fn_users_actions_delete('"+id+"');\" id='"+id+"'>从该组移除</a> ";

			if(cellvalue != "负责人"){
				restr = restr + "<a class='btn btn-success btn-xs' onclick=\"fn_users_actions_principal('"+id+"');\"  id='"+id+"'>设为该组部门负责人</a> ";
			}

		}else{
			restr = "<a class='btn btn-default btn-xs' onclick=\"fn_users_actions_add('"+id+"');\"  id='"+id+"'>加入该组</a> ";

		}
		return restr;
	}

	function fn_users_actions_add(id){
		var rowdata = $("#ajax_member_table").getRowData(id);
		fn_members_action(id,"add",rowdata['dutyId']);
	}
	function fn_users_actions_delete(id){
		var rowdata = $("#ajax_member_table").getRowData(id);
		console.debug(rowdata);
		fn_members_action(id,"delete",rowdata['dutyId']);
	}
	function fn_users_actions_principal(id){
		var rowdata = $("#ajax_member_table").getRowData(id);
		fn_members_action(id,"principal",rowdata['dutyId']);
	}
	function reladGrid(id){
		var data = {keyId:id};
		$("#ajax_member_table").jqGrid("setGridParam",{
			datatype:"json",
			postData:data
		}).trigger("reloadGrid");
	}
</script>
<script type="text/javascript">

	$("input[name=query-type]").off("change").on("change",function(e){
		var type = $(this).val();
		var data = {keyId:ajax_DepartmentId,type:type};
		$("#ajax_member_table").jqGrid("setGridParam",{
			datatype:"json",
			page:1,
			postData:data
		}).trigger("reloadGrid");
	})
</script>
